<template>
  <div class="all">
    <span class="title" style="padding-left:1%;">是否开启魔方游戏：</span>
    <el-switch
    @change="SetConfig"
      v-model="eanbleCube"
      active-color="#13ce66"
      inactive-color="#ff4949"
      :active-value='1'
      :inactive-value='0'
      :width="40"
      >
    </el-switch>
    <div class="game_conent">
      <el-card>
        <div slot="header">
          <span class="title">幸运魔方游戏设置</span>
          <el-button type="primary" size="small" style="float: right;" @click="subim(luckyCube)">提交</el-button>
        </div>
        <div class="conent">
          <table width="100%">
            <tbody>
              <tr v-for="(val, index) in luckyCube.data">
                <td class="R-right">礼物{{name[index]}}</td>
                <td>
                  <div style="display: inline-block;">礼物名称
                    <el-select v-model="val.giftName" placeholder="请选择">
                      <el-option v-for="item in Lgiflist" :key="item.id" :label="item.giftName" :value="item.giftName"
                        :disabled="item.disabled">
                        <div>{{item.giftName}} </div>
                        <span><img :src="item.giftIcon" alt=""></span>
                        <div>价值{{item.needCoin}}幸运币 </div>
                      </el-option>
                    </el-select>
                  </div>
                  <span>概率<input type="text" size="3" v-model="val.odds"></span>
                  <span>是否开启暴灯
                    <el-radio-group v-model="val.isBaodeng">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-card>
      <el-card>
        <div slot="header">
          <span class="title">钻石魔方游戏设置</span>
           <el-button type="primary" size="small" style="float: right;" @click="subim(diamondCube)">提交</el-button>
        </div>
        <div class="conent">
         <table width="100%">
            <tbody>
              <tr v-for="(val, index) in diamondCube.data">
                <td class="R-right">礼物{{name[index]}}</td>
                <td>
                  <div style="display: inline-block;">礼物名称
                    <el-select v-model="val.giftName" filterable placeholder="请选择">
                      <el-option v-for="item in Lgiflist" :key="item.id" :label="item.giftName" :value="item.giftName">
                        <div>{{item.giftName}} </div>
                        <span><img :src="item.giftIcon" alt=""></span>
                        <div>价值{{item.needCoin}}幸运币 </div>
                      </el-option>
                    </el-select>
                  </div>
                  <span>概率:</span><el-input v-model="val.odds" size="mini"></el-input>
                  <span>是否开启暴灯:</span>
                  <el-radio-group v-model="val.isBaodeng">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </td>
              </tr>

            </tbody>
          </table>
        </div>
      </el-card>
    </div>

 <!--   <ul class="head-ul">
      <li>幸运魔方游戏设置</li>
    </ul> -->
<!--    <div class="R-body">

      <el-button type="primary" @click="subim(luckyCube)">提交</el-button>
      <ul class="head-ul">
        <li>钻石魔方游戏设置</li>
      </ul>
      <div class="R-body">

      </div>
      <el-button type="primary" @click="subim( )">提交</el-button>
    </div> -->
  </div>
</template>

<script>
  import {
    cube_getAll,
    getAll,
    cube_mod,
    ConfigGet,
    ConfigSet
  } from '@/utils/API'
     import Cookies from 'js-cookie'
  export default {
    data() {
      return {
        luckyCube: {
          state: 1,
          data: []
        },
        diamondCube: {
          state: 2,
          data: []
        },
        eanbleCube:'',
        name: ['一', '二', '三', '四', '五', '六', '七', '八'],
        Dgiflist: [],
        Lgiflist: [],
        admin:{
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')
        }
      }
    },
    methods: {
      // @change="luckyList(val.giftName,index)"
      subim(e) {
        var i = 0
        const arr = []
        var _this = this
        e.data.forEach(val => {
          val.enable = Number(e.state)
		  _this.giflist.forEach(item=>{
		  	if(item.giftName == val.giftName){
		  		val.giftId = item.id
		  		val.url = item.giftIcon
				if (val.giftId != "" && val.giftName != "" && val.url != "" && val.odds != "" && val.isBaodeng == 0 ||
				  val.isBaodeng == 1 && val.enable != "") {
				  val.isBaodeng = Number(val.isBaodeng)
				  val.odds = Number(val.odds)
				  arr.push(val)
				} else {
				  this.$message.error('数据错误')
				  return
				}
		  	}
		  })
        })
        cube_mod(arr,this.admin).then(res => {
          if (res.code == 0) {
            this.$message.success('修改成功')
          }
        })
      },
      SetConfig(){
        const data={
          eanbleCube:this.eanbleCube,
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')
        }
        ConfigSet(data).then(res=>{
          if(res.code==0){
            if(this.eanbleCube==0){
              this.$message.success('关闭成功')
            }else{
              this.$message.success('开启成功')
            }
          }
        })
      }
    },
    mounted() {
      // this.Postdata()
      cube_getAll(this.admin).then(res => {
        const data = res.data.cubeList
        data.forEach((val,key) => {

          if (val.type == 'luckyCube') {
            this.luckyCube.data.push(val)
            this.luckyCube.state=val.enable
          } else {
            this.diamondCube.data.push(val)
            this.diamondCube.state=val.enable
          }
        })
      })
      getAll(this.admin).then(res => {
        const data = res.data.giftList
        data.forEach((val, key) => {
          val.disabled = false
        })
        this.giflist = data
        this.Lgiflist = data
        this.Dgiflist = data
      })
      ConfigGet(this.admin).then(res=>{
          this.eanbleCube=res.data.enableCube
      })
    },
  }
</script>

<style scoped lang="scss">
 .game_conent{display: flex;margin: 2% 0 0 0;}
.el-card{width: 46%;margin: 0 1%;}
.title{font-weight: 600;font-size: 18px;}
.all{padding-top: 1%;}
tr{height: 70px;}
table{
  .el-input{width: 90px;margin:0 5px;}
  .el-radio-group{margin:0 5px;}

}
.el-popper{
.el-select-dropdown__item{height: 100%;display: flex;
img {width: 50px;height: 50px;}
div{line-height: 50px;height: 50px;width: auto;margin: 0 6px;}}
}

</style>
